<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者：hui.zhang
        	时间：2017-12-07
        	描述：导入easyui类库
       -->
		<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
		<!--
        	作者：offline
        	时间：2017-12-07
        	描述：引入ztree
        -->
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />

		<!--
        	作者：offline
        	时间：2017-12-07
        	描述：ztree树形菜单
        -->
		<SCRIPT type="text/javascript">
			<!--
			$(function() {
				var setting = {
					data: {
						simpleData: {
							enable: true
						}
					},

					callback: {
						onClick: onClick
					}
				};

				var zNodes = [{
						id: 1,
						pId: 0,
						name: "基础档案设置",
						open: true
					}, {
						id: 11,
						pId: 1,
						name: "百度",
						page: "https://www.baidu.com/"
					}, {
						id: 12,
						pId: 1,
						name: "码云",
						page: "https://www.gitee.com/"
					}, {
						id: 13,
						pId: 1,
						name: "叶子节点13"
					}, {
						id: 14,
						pId: 1,
						name: "叶子节点14"
					}, {
						id: 2,
						pId: 0,
						name: "父节点2 - 折叠"
					}, {
						id: 21,
						pId: 2,
						name: "叶子节点21"
					}, {
						id: 22,
						pId: 2,
						name: "叶子节点22"
					}, {
						id: 23,
						pId: 2,
						name: "叶子节点23"
					}, {
						id: 24,
						pId: 2,
						name: "叶子节点24"
					}

				];

				$(document).ready(function() {
					$.fn.zTree.init($("#treeMenu"), setting, zNodes);
				});

				//为选项卡添加右键事件
				var currentRightTitle;
				$("#tabs").tabs({
					
					onContextMenu: function(e, title,index) {
						currentRightTitle=title;
						
						$('#mm').menu('show', {
							left: e.pageX,
							top: e.pageY
						});
						e.preventDefault(); // 禁用原来的右键效果 
						
					}
				});
				
				
				$.messager.show({
					title:'欢迎光临！',
					msg:'消息5秒后消失',
					timeout:5000
				});
				
				$("#Close").click(function(){
//					alert(currentRightTitle);
					$("#tabs").tabs('close',currentRightTitle);
				});
			});
			
			
			

			function onClick(event, treeId, treeNode, clickFlag) {
				//如果是子节点，点击出现tab选项卡
				if(treeNode.page != "" && treeNode.page != undefined) {
					//判断要打开的选项卡是否存在
					if($("#tabs").tabs('exists', treeNode.name)) {
						$("#tabs").tabs('select', treeNode.name);
					} else {
						//不存在，创建新的选项卡
						var content = '<div style="width:100%;height:100%;border:1px solid red;overflow:hidden">' +
							'<iframe src="' +
							treeNode.page +
							'"scrolling="auto" style="height:100%;width:100%"></iframe></div>';

						//					var content = '<div style="width:100%;height:100%;overflow:hidden;">'
						//								+ '<iframe src="'
						//								+ treeNode.page
						//								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
						$('#tabs').tabs('add', {
							title: treeNode.name,
							selected: true,
							closable: true,
							content: content
						});

					}
				}

			}

			//-->
		</SCRIPT>

	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',split:true" style="height:100px;">
			<a href="javascript:void(0)" data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton" style="margin-left: 1500px; margin-top: 40px;">系统设置</a>
		</div>
		<div data-options="region:'south',split:true" style="height:60px;">
			
			
		</div>
		<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true">
				<div title="基本功能" style="overflow:auto;padding:10px;">
					<ul id="treeMenu" class="ztree"></ul>
				</div>
				<div title="系统管理" style="padding:10px;">
					content2
				</div>
				<div title="Title3">
					content3
				</div>
			</div>
		</div>

		<div data-options="region:'center'">
			<div id="tabs" class="easyui-tabs" data-options="fit:true">
				<div title="消息列表" data-options="closable:true">

				</div>

			</div>

		</div>

		<!--
        	作者：offline
        	时间：2017-12-07
        	描述：右键菜单
        -->
		<div id="mm" class="easyui-menu" style="width:60px;">
			<div id="Close">关闭当前选项卡</div>
			<div>关闭其他选项卡</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel'">关闭所有选项卡</div>
		</div>

	</body>

</html>